<template>
  <div>
    <top-bar backShow="true" titleShow="true" title="新闻正文"></top-bar>
    <div class="content">
      <div class="photo">
        <img :src="imgUrl" alt="">
      </div>
      <div class="text con-bg">
        <div class="title gfc-white">
          <div class="text-overflow-multi">{{title}}</div>
        </div>
        <div class="text-con">{{con}}</div>
      </div>
      <div class="comment con-bg">
        <div class="title">评论</div>
        <ul class="comment-con">
          <li class="con flex">
            <img src="http://via.placeholder.com/90x90" alt="">
            <div class="info flex-1">
              <div class="name">名字名字</div>
              <div class="con text-overflow-multi">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</div>
            </div>
            <div class="time">20小时前</div>
          </li>
          <li class="con flex">
            <img src="http://via.placeholder.com/90x90" alt="">
            <div class="info flex-1">
              <div class="name">名字名字</div>
              <div class="con text-overflow-multi">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</div>
            </div>
            <div class="time">20小时前</div>
          </li>
          <!--<li class="no-con align-c">这个沙发它又软又舒服，就像你的评论又快又精彩！</li>-->
        </ul>
        <div class="handle flex">
          <div class="praise flex-1" @click="praise" :class="{active: isPraise}">
            <div></div>
          </div>
          <div class="write flex-1">
            <div></div>
          </div>
          <div class="share flex-1">
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        imgUrl: '',  //图片链接
        title: '',   //标题
        con: '',     //正文
        isPraise: false  //是否点赞
      }
    },
    methods: {
      praise(){
        var _this = this;
        if (this.isPraise) {
          this.asyncHttp('get', '/api/articles/1/unlike', {}, function (res) {
            _this.isPraise = false;
          })
        } else {
          this.asyncHttp('get', '/api/articles/1/like', {}, function (res) {
            _this.isPraise = true;
          })
        }
      }
    },
    components: {
      topBar
    },
    mounted(){
      var _this = this;
      this.asyncHttp('get', '/api/articles/1', {}, function (res) {
        _this.imgUrl = res.article.img;
        _this.title = res.article.title;
        _this.con = res.article.content;
      })
    }
  }
</script>

<style scoped>
  .text {
    margin-bottom: .1rem;
  }

  .text .title {
    font-size: .18rem;
    padding: .2rem 0;
    margin: 0 .18rem;
    border-bottom: 1px solid #505e70;
  }

  .text .title > div {
    line-height: 1.5;
  }

  .text .text-con {
    font-size: .16rem;
    padding: .2rem .18rem .5rem;
    color: #c8c8c8;
  }

  .comment .title {
    font-size: .18rem;
    color: #6a747f;
    text-indent: .18rem;
    height: .57rem;
    line-height: .57rem;
    border-bottom: 1px solid #333a42;
  }

  .comment-con > .con {
    padding: .2rem .18rem;
    border-bottom: 1px solid #333a42;
  }

  .comment-con > .con:last-child {
    border: none;
  }

  .comment-con > .con img {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .comment-con > .con .info .name {
    font-size: .16rem;
    color: #fefefe;
    margin-bottom: .14rem;
  }

  .comment-con > .con .info .con {
    font-size: .16rem;
    color: #fff;
    line-height: 1.5;
  }

  .comment-con > .con .time {
    margin-left: .18rem;
    font-size: .12rem;
    color: #6a747f;
  }

  .comment-con .no-con {
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: .14rem;
    color: #6a747f;
  }

  .handle {
    height: .49rem;
    background: #282f37;
    border-top: 1px solid #3b434d;
  }

  .praise div, .write div, .share div {
    width: .22rem;
    height: .22rem;
  }

  .praise div {
    margin: .12rem 0 0 .18rem;
    background: url("../../assets/praise2.png") 0/100% 100%;
  }

  .praise.active div {
    background: url("../../assets/praise1.png") 0/100% 100%;
  }

  .write div {
    margin: .12rem auto 0;
    background: url("../../assets/comment.png") 0/100% 100%;
  }

  .share {
    position: relative;
  }

  .share div {
    position: absolute;
    top: .12rem;
    right: .18rem;
    background: url("../../assets/share1.png") 0/100% 100%;
  }
</style>
